<template>
  <div :class="{'font-color': isShow || endVal == 0}" style="color: #58CAFB">
    <countTo :startVal='startVal' :endVal='showEndVal' :duration='duration' :decimals="decimals"
             style="color: #58CAFB"/>
    {{ decimals > 0 ? '万' : '' }}
  </div>
</template>

<script>
import countTo from 'vue-count-to'

export default {
  components: {
    countTo
  },
  data () {
    return {
      showEndVal: 0,
      decimals: 0,
      isShow: false
    }
  },
  props: {
    endVal: {
      type: [String, Number],
      required: true
    },
    startVal: {
      type: Number,
      default () {
        return 0
      }
    },
    duration: {
      type: Number,
      default () {
        return 1500
      }
    }
  },
  watch: {
    endVal: {
      handler (val) {
        this.isShow = false
        if (typeof val == 'string') {
          this.decimals = 2
        } else {
          this.decimals = 0
        }
        this.showEndVal = parseFloat(val)
        setTimeout(() => {
          this.isShow = true
        }, this.duration)
      }
    }
  }
}
</script>
